<!DOCTYPE html>
{% load staticfiles i18n %}
{% load render_bundle from webpack_loader %}
{% load version %}

<html lang="{{ LANGUAGE_CODE }}" class="no-js">
  <head>
    <title>
      {% block title %}
        Dashboard Style Guide - Saleor
      {% endblock %}
    </title>
    {% block meta %}
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    {% endblock meta %}

    {% include 'favicon.html' %}
    {% render_bundle 'vendor' 'css' %}
    {% render_bundle 'dashboard' 'css' %}
    <link rel="stylesheet" type="text/css" href="{% static "versatileimagefield/css/versatileimagefield.css" %}">

    {% block custom_css %}{% endblock %}
  </head>

  <body class="{% block body_class %}body-home{% endblock %}">
    <header class="styleguide">
      <nav class="top-nav" id="top-nav">
        <div class="nav-wrapper">
          <ul class="left">
            <li class="logo">
              <a href="{% url 'dashboard:index' %}">
                <svg data-src="{% static "dashboard/images/saleor_logo.svg" %}" height="38px" width="176px" />
              </a>
            </li>
            <li>
              <span>Style Guide</span>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <main class="main styleguide">
      <div class="container">
          <div class="row">
            <div class="col m3 push-m9 s12">
              <ul class="styleguide__menu">
                <li>
                  <a href="#typography">
                    Typography
                  </a>
                </li>
                <li>
                  <a href="#colors">
                    Colors
                  </a>
                </li>
                <li>
                  <a href="#helpers">
                    Helpers
                  </a>
                </li>
                <li>
                  <a href="#buttons">
                    Buttons
                  </a>
                </li>
                <li>
                  <a href="#icons">
                    Icons
                  </a>
                </li>
                <li>
                  <a href="#grid">
                    Grid
                  </a>
                </li>
                <li>
                  <a href="#forms">
                    Forms
                  </a>
                </li>
                <li>
                  <a href="#breadcrumbs">
                    Breadcrumbs
                  </a>
                </li>
                <li>
                  <a href="#tabs">
                    Tabs
                  </a>
                </li>
                <li>
                  <a href="#tables">
                    Tables
                  </a>
                </li>
                <li>
                  <a href="#lists">
                    Lists
                  </a>
                </li>
                <li>
                  <a href="#cards">
                    Cards
                  </a>
                </li>
                <li>
                  <a href="#dropdowns">
                    Dropdowns
                  </a>
                </li>
                <li>
                  <a href="#modals">
                    Modals
                  </a>
                </li>
                <li>
                  <a href="#toasts">
                    Toasts
                  </a>
                </li>
                <li>
                  <a href="#pagination">
                    Pagination
                  </a>
                </li>
              </ul>
            </div>
            <div class="col m9 pull-m3 s12 styleguide__content">
              <div id="info" class="styleguide__content__block">
                <div class="card">
                  <div class="card-content">
                    <p class="text-lg">We use <strong>Materialize CSS</strong> framework to build dashboard templates. You can <a href="http://materializecss.com/" target="_blank">visit official site</a> for more components and utilities.</p>
                  </div>
                </div>
                <div class="card">
                  <div class="card-content">
                   <p class="text-lg"> if you’re using a recent ver­sion of IE, Fire­fox, Safari or Chrome (though not Opera), you can edit the text in sections marked with edit icon <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />. Check how our componentst will look like in your language and with your content.</p>
                  </div>
                </div>
              </div>
              <div id="typography" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Typography <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                </h3>
                <div class="card">
                  <div class="card-content">
                    <div class="section">
                      <p class="text-lg">
                          We use Roboto in Regular(400) and <strong>Bold(700)</strong> weights.
                      </p>
                      <h1 contenteditable="true">
                        H1 example text
                      </h1>
                      <h2 contenteditable="true">
                        H2 example text
                      </h2>
                      <h3 contenteditable="true">
                        H3 example text
                      </h3>
                      <h4 contenteditable="true">
                        H4 example text
                      </h4>
                      <h5 contenteditable="true">
                        H5 example text
                      </h5>
                    </div>
                    <div class="section">
                      <p contenteditable="true">
                        Lorem ipsum dolor sit amet mauris. Etiam sapien quis justo. Maecenas consequat, orci quis blandit ultrices posuere vitae, mollis nunc tempus euismod. Vestibulum ante eget odio. Nam pellentesque ut, turpis. Nam sed est id aliquet elit metus, quis nibh. Morbi augue imperdiet wisi.
                      </p>
                    </div>
                    <div class="section">
                      <a href="#" contenteditable="true">
                        Link example text
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div id="colors" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Colors
                </h3>
                <div class="row">
                  <div class="col l3 m6 s12">
                    <div class="card">
                      <div class="card-color off-black"></div>
                      <div class="card-content">
                        <p class="center-align">rgba(0, 0, 0, 0.87)</p>
                        <p class="center-align">$off-black</p>
                      </div>
                    </div>
                  </div>
                  <div class="col l3 m6 s12">
                    <div class="card">
                      <div class="card-color primary-color"></div>
                      <div class="card-content">
                        <p class="center-align">#E57373</p>
                        <p class="center-align">$primary-color</p>
                      </div>
                    </div>
                  </div>
                  <div class="col l3 m6 s12">
                    <div class="card">
                      <div class="card-color primary-color-light"></div>
                      <div class="card-content">
                        <p class="center-align">#EF9A9A</p>
                        <p class="center-align">$primary-color-light</p>
                      </div>
                    </div>
                  </div>
                  <div class="col l3 m6 s12">
                    <div class="card">
                      <div class="card-color secondary-color"></div>
                      <div class="card-content">
                        <p class="center-align">#26A69A</p>
                        <p class="center-align">$secondary-color</p>
                      </div>
                    </div>
                  </div>
                  <div class="col l3 m6 s12">
                    <div class="card">
                      <div class="card-color success-color"></div>
                      <div class="card-content">
                        <p class="center-align">#4CAF50</p>
                        <p class="center-align">$success-color</p>
                      </div>
                    </div>
                  </div>
                  <div class="col l3 m6 s12">
                    <div class="card">
                      <div class="card-color error-color"></div>
                      <div class="card-content">
                        <p class="center-align">#F44336</p>
                        <p class="center-align">$error-color</p>
                      </div>
                    </div>
                  </div>
                  <div class="col l3 m6 s12">
                    <div class="card">
                      <div class="card-color link-color"></div>
                      <div class="card-content">
                        <p class="center-align">#039BE5</p>
                        <p class="center-align">$link-color</p>
                      </div>
                    </div>
                  </div>
                  <div class="col l3 m6 s12">
                    <div class="card">
                      <div class="card-color grey-color"></div>
                      <div class="card-content">
                        <p class="center-align">#9E9E9E</p>
                        <p class="center-align">$grey-color</p>
                      </div>
                    </div>
                  </div>
                  <div class="col l3 m6 s12">
                    <div class="card">
                      <div class="card-color sidenav-font-color"></div>
                      <div class="card-content">
                        <p class="center-align">#616161</p>
                        <p class="center-align">$sidenav-font-color</p>
                      </div>
                    </div>
                  </div>
                </div> 
              </div>
              <div id="helpers" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Helpers
                </h3>
                <div class="card">
                  <div class="card-content">
                    <div class="section">
                      <h4>
                        Text align
                      </h4>
                        <code>&lt;p class=&quot;left-align&quot;&gt;Text left aligned&lt;/p&gt;</code>
                        <code>&lt;p class=&quot;right-align&quot;&gt;Text right aligned&lt;/p&gt;</code>
                        <code>&lt;p class=&quot;center-align&quot;&gt;Text center aligned&lt;/p&gt;</code>
                    </div>
                    <div class="section">
                      <h4>
                        Floats
                      </h4>
                        <code>&lt;div class=&quot;left&quot;&gt;Add float:left&lt;/div&gt;</code>
                        <code>&lt;div class=&quot;right&quot;&gt;Add float:right&lt;/div&gt;</code>
                    </div>
                    <div class="section">
                      <h4>
                        Hide content
                      </h4>
                      <div class="data-table-container">
                        <table class="bordered highlight responsive data-table">
                          <thead>
                            <tr>
                              <th>
                                Class name
                              </th>
                              <th>
                                Screen Range
                              </th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr data-action-go="">
                              <td>
                                .hide
                              </td>
                              <td>
                              Hidden for all Devices
                              </td>
                            </tr>
                            <tr data-action-go="">
                              <td>
                                .hide-on-small-only
                              </td>
                              <td>
                                Hidden for Mobile Only
                              </td>
                            </tr>
                            <tr data-action-go="">
                              <td>
                                .hide-on-med-only
                              </td>
                              <td>
                               Hidden for Tablet Only
                              </td>
                            </tr>
                            <tr data-action-go="">
                              <td>
                                .hide-on-med-and-down
                              </td>
                              <td>
                                Hidden for Tablet and Below
                              </td>
                            </tr>
                            <tr data-action-go="">
                              <td>
                                .hide-on-med-and-up
                              </td>
                              <td>
                                Hidden for Tablet and Above
                              </td>
                            </tr>
                            <tr data-action-go="">
                              <td>
                                .hide-on-large-only
                              </td>
                              <td>
                                Hidden for Desktop Only
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <code>&lt;div class=&quot;hide&quot;&gt;&lt;/div&gt;</code>
                    </div>
                    <div class="section">
                      <h4>
                        No margin
                      </h4>
                      <code>&lt;div class=&quot;no-margin&quot;&gt;Remove all margins&lt;/div&gt;</code>
                    </div>
                    <div class="section">
                      <h4>
                        Labels <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                      </h4>
                      <code>&lt;span class=&quot;label&quot;&gt;&lt;/span&gt;</code>
                      <span class="label" contenteditable="true">Example label class</span>
                      <code>&lt;span class=&quot;label label-danger&quot;&gt;&lt;/span&gt;</code>
                      <span class="label label-danger" contenteditable="true">Example label class</span>
                      <code>&lt;span class=&quot;label label-success&quot;&gt;&lt;/span&gt;</code>
                      <span class="label label-success" contenteditable="true">Example label class</span>
                    </div>
                    <div class="section">
                      <h4>
                        Currency <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                      </h4>
                      <code>&lt;span class=&quot;currency&quot;&gt;&lt;/span&gt;</code>
                      <span class="currency" contenteditable="true">USD</span>
                    </div>
                    <div class="section">
                      <h4>
                        Text large <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                      </h4>
                      <code>&lt;p class=&quot;text-lg&quot;&gt;&lt;/p&gt;</code>
                      <p contenteditable="true">
                        Regular example text
                      </p>
                      <p class="text-lg" contenteditable="true">
                        Large example text
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div id="buttons" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Buttons <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                </h3>
                <div class="card">
                  <div class="card-content">
                    <div class="row section">
                      <div class="col m4 s12">
                        <a class="btn waves-effect waves-light" contenteditable="true">
                          Primary
                        </a>
                      </div>
                       <div class="col m4 s12">
                        <a class="btn btn-flat" contenteditable="true">
                          Secondary
                        </a>
                      </div>
                      <div class="col m4 s12">
                        <a class="btn btn-floating btn-large waves-effect waves-light">
                          <svg data-src="{% static "dashboard/images/add.svg" %}" />
                        </a>
                      </div>
                    </div>
                    <div class="row section">
                      <div class="col m4 s12">
                        <a class="btn waves-effect waves-light disabled" contenteditable="true">
                          Primary disabled
                        </a>
                      </div>
                      <div class="col m4 s12">
                        <a class="btn btn-flat disabled" contenteditable="true">
                          Secondary disabled
                        </a>
                      </div>
                      <div class="col m4 s12">
                        <a class="btn btn-floating btn-large waves-effect waves-light disabled">
                          <svg data-src="{% static "dashboard/images/add.svg" %}" />
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="icons" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Icons
                </h3>
                <div class="card">
                  <div class="card-content">
                    <div class="section">
                      <h4>
                        Used icons
                      </h4>
                      <svg data-src="{% static "dashboard/images/add.svg" %}" />
                      <svg data-src="{% static "dashboard/images/account_circle.svg" %}" />
                      <svg data-src="{% static "dashboard/images/search.svg" %}" />
                      <svg data-src="{% static "dashboard/images/mobile_menu.svg" %}" />
                      <svg data-src="{% static "dashboard/images/more_vert.svg" %}" height="24" width="24" />
                      <svg data-src="{% static "dashboard/images/arrow_left.svg" %}" />
                      <svg data-src="{% static "dashboard/images/chevron_right.svg" %}" fill="#000" />
                      <svg data-src="{% static "dashboard/images/edit.svg" %}" fill="#000" width="24px" height="24px" />
                      <svg data-src="{% static "dashboard/images/style.svg" %}" fill="#000" width="24px" height="24px" />
                      <svg data-src="{% static "dashboard/images/store.svg" %}" fill="#000" width="24px" height="24px" />
                      <svg data-src="{% static "dashboard/images/collections.svg" %}" fill="#000" width="24px" height="24px" />
                      <svg data-src="{% static "dashboard/images/description.svg" %}" fill="#000" width="24px" height="24px" />
                      <svg data-src="{% static "dashboard/images/description.svg" %}" fill="#000" width="24px" height="24px" />
                      <svg data-src="{% static "dashboard/images/history.svg" %}" fill="#000" width="24px" height="24px" />
                      <svg data-src="{% static "dashboard/images/arrow_drop_down.svg" %}" fill="#000" width="24px" height="24px" />
                    </div>
                    <div class="section">
                      <h4>
                        All icons
                      </h4>
                      <a href="https://material.io/icons/" target="_blank">https://material.io/icons/</a>
                    </div>
                  </div>
                </div>
              </div>
              <div id="grid" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Grid
                </h3>
                <div class="row">
                  <div class="col m12 s12">
                    <div class="card">
                      <div class="card-content">
                        <p>col m12 s12</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col m6 s6">
                    <div class="card">
                      <div class="card-content">
                        <p>col m6 s6</p>
                      </div>
                    </div>
                  </div>
                  <div class="col m6 s6">
                    <div class="card">
                      <div class="card-content">
                        <p>col m6 s6</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col m3 s3">
                    <div class="card">
                      <div class="card-content">
                        <p>col m3 s6</p>
                      </div>
                    </div>
                  </div>
                  <div class="col m9 s9">
                    <div class="card">
                      <div class="card-content">
                        <p>col m9</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col m3 s6">
                    <div class="card">
                      <div class="card-content">
                        <p>col m3 s6</p>
                      </div>
                    </div>
                  </div>
                  <div class="col m3 s6">
                    <div class="card">
                      <div class="card-content">
                        <p>col m3 s6</p>
                      </div>
                    </div>
                  </div>
                  <div class="col m3 s6">
                    <div class="card">
                      <div class="card-content">
                        <p>col m3 s6</p>
                      </div>
                    </div>
                  </div>
                  <div class="col m3 s6">
                    <div class="card">
                      <div class="card-content">
                        <p>col m3 s6</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col m10 offset-m1 s10 offset-s1">
                    <div class="card">
                      <div class="card-content">
                        <p>col m10 offset-m1 s10 offset-s1</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="data-table-header">
                    <span class="data-table-title">
                     Screen Sizes
                    </span>
                  </div>
                  <div class="data-table-container">
                    <table class="bordered highlight responsive data-table">
                      <thead>
                        <tr>
                          <th></th>
                          <th>
                            Mobile Devices <= 600px
                          </th>
                          <th>
                            Tablet Devices <= 992px
                          </th>
                          <th>
                            Desktop Devices > 992px
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                          <tr data-action-go="">
                            <td>
                              Class Prefix
                            </td>
                            <td>
                             .s
                            </td>
                            <td>
                              .m
                            </td>
                            <td>
                              .l
                            </td>
                          </tr>
                          <tr data-action-go="">
                            <td>
                              Container Width
                            </td>
                            <td>
                              85%
                            </td>
                            <td>
                              85%
                            </td>
                            <td>
                              70%
                            </td>
                          </tr>
                          <tr data-action-go="">
                            <td>
                              Number of Columns
                            </td>
                            <td>
                              12
                            </td>
                            <td>
                              12
                            </td>
                            <td>
                              12
                            </td>
                          </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div id="forms" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Forms 
                  <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                </h3>
                <div class="card">
                  <div class="card-content">
                    <div class="section">
                      <h4>
                        Input
                      </h4>
                      <form>
                        <div class="input input-field">
                          <label class="active" for="id_name" contenteditable="true">
                            Name
                          </label>
                          <input id="id_name" maxlength="128" name="name" placeholder="Give your awesome product a name" type="text" value="Lucas, Martinez and Chaney" required="">
                        </div>
                      </form>
                    </div>
                    <div class="section">
                      <h4>
                        Input with sufix
                      </h4>
                      <form>
                        <div class="input input-field">
                          <label class="active" for="id_price" contenteditable="true">
                            Price
                          </label>
                          <div class="input-with-suffix">
                            <input class=" validate" id="id_price" name="price" step="any" type="number" required="">
                            <div class="input-text-suffix" contenteditable="true">USD</div>
                          </div>
                        </div>
                      </form>
                    </div>
                    <div class="section">
                      <h4>
                        Datepicker
                      </h4>
                      <form>
                        <div class="input input-field">
                          <label class="active" for="id_name" contenteditable="true">
                            Name
                          </label>
                          <input id="id_name" class="datepicker" maxlength="128" name="name" type="text" value="7 March 2017" required="">
                        </div>
                      </form>
                    </div>
                    <div class="section">
                      <h4>
                        Select
                      </h4>
                      <form>
                        <div class="input input-field">
                          <label class="active" for="id_attribute-coffee-genre" contenteditable="true">
                            Coffee Genre (optional)
                          </label>
                          <select class=" initialized" id="id_attribute-coffee-genre" name="attribute-coffee-genre">
                            <option value="" contenteditable="true">---------</option>
                            <option value="2" contenteditable="true">Arabica</option>
                            <option value="3 contenteditable="true"" selected="selected">Robusta</option>
                          </select>
                        </div>
                      </form>
                    </div>
                    <div class="section">
                      <h4>
                        Multiple Select
                      </h4>
                      <form>
                        <div class="input input-field">
                          <label class="active" for="id_attribute-coffee-genre" contenteditable="true">
                            Coffee Genre (optional)
                          </label>
                          <select multiple class=" initialized" id="id_attribute-coffee-genre" name="attribute-coffee-genre">
                            <option value="" contenteditable="true">---------</option>
                            <option value="2" contenteditable="true">Arabica</option>
                            <option value="3" contenteditable="true" selected="selected">Robusta</option>
                          </select>
                        </div>
                      </form>
                    </div>
                    <div class="section">
                      <h4>
                        Textarea
                      </h4>
                      <form>
                        <div class="input input-field">
                          <textarea id="id_description" class="materialize-textarea" name="description">Lorem ipsum dolor sit amet mauris. Etiam sapien quis justo. Maecenas consequat, orci quis blandit ultrices posuere vitae, mollis nunc tempus euismod. Vestibulum ante eget odio. Nam pellentesque ut, turpis. Nam sed est id aliquet elit metus, quis nibh. Morbi augue imperdiet wisi.</textarea>
                          <label class="active" for="id_description" contenteditable="true">
                            Description
                          </label>
                        </div>
                      </form>
                    </div>
                    <div class="section">
                      <h4>
                        Radio Buttons
                      </h4>
                      <form>
                        <div class="input input-field">
                          <p>
                            <input name="group1" type="radio" id="test1" />
                            <label for="test1" contenteditable="true">
                              Radio 1
                            </label>
                          </p>
                          <p>
                            <input name="group1" type="radio" id="test2" />
                            <label for="test2" contenteditable="true">
                              Radio 2
                            </label>
                          </p>
                          <p>
                            <input name="group1" type="radio" id="test4" disabled="disabled" />
                            <label for="test4" contenteditable="true">
                              Disabled Radio
                            </label>
                          </p>
                        </div>
                      </form>
                    </div>
                    <div class="section">
                      <h4>
                        Checkboxes
                      </h4>
                      <form>
                        <div class="input input-field">
                          <p>
                            <input type="checkbox" class="filled-in" id="filled-in-box" />
                            <label for="filled-in-box" contenteditable="true">
                              Check
                            </label>
                          </p>
                          <p>
                            <input type="checkbox" class="filled-in" id="test7" checked="checked" disabled="disabled" />
                            <label for="test7" contenteditable="true">
                              Disabled Checked
                            </label>
                          </p>
                          <p>
                            <input type="checkbox" id="test8" disabled="disabled" />
                            <label for="test8" contenteditable="true">
                              Disabled
                            </label>
                          </p>
                        </div>
                      </form>
                    </div>
                    <div class="section">
                      <h4>
                        File input
                      </h4>
                      <form>
                        <div class="file-field input-field">
                          <div class="btn">
                            <span contenteditable="true">File</span>
                            <input type="file">
                          </div>
                          <div class="file-path-wrapper">
                            <input class="file-path validate" type="text">
                          </div>
                        </div>
                      </form>
                    </div>
                    <div class="section">
                      <h4>
                        Errors
                      </h4>
                      <form>
                        <div class="input input-field">
                          <label class="active" for="id_name" contenteditable="true">
                            Name
                          </label>
                          <input id="id_name" class="invalid" maxlength="128" name="name" placeholder="Give your awesome product a name" type="text" value="" required="">
                           <p class="help-block materialize-red-text" contenteditable="true">
                            This field is required
                           </p>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              <div id="breadcrumbs" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Breadcrumbs
                  <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                </h3>
                <div class="subheader top-nav">
                  <div class="container">
                    <ul class="breadcrumbs breadcrumbs--history">
                      <li>
                        <a class="breadcrumb" contenteditable="true">
                          Products
                        </a>
                      </li>
                      <li class="back-mobile">
                        <a>
                          <svg data-src="{% static "dashboard/images/arrow_left.svg" %}" fill="#fff" width="20px" height="20px" />
                        </a>
                      </li>
                      <li>
                        <span class="breadcrumbs--ellipsed-item" contenteditable="true">
                          Lucas, Martinez and Chaney
                        </span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div id="tabs" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Tabs
                  <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                </h3>
                <ul class="tabs">
                  <li class="tab col s3" role="presentation">
                    <a href="#details" class="active" role="tab">
                      <span contenteditable="true">
                        Details
                      </span>
                      <svg data-src="{% static "dashboard/images/edit.svg" %}" />
                    </a>
                  </li>
                  <li class="tab col s3" role="presentation">
                    <a href="#variants" role="tab">
                      <span contenteditable="true">
                        Variants
                      </span>
                      <svg data-src="{% static "dashboard/images/style.svg" %}" />
                    </a>
                  </li>
                  <li class="tab col s3" role="presentation">
                    <a href="#stock" role="tab">
                      <span contenteditable="true">
                        Stock
                      </span>
                      <svg data-src="{% static "dashboard/images/store.svg" %}" />
                    </a>
                  </li>
                  <li class="tab col s3" role="presentation">
                    <a href="#images" role="tab">
                      <span contenteditable="true">
                        Images
                      </span>
                      <svg data-src="{% static "dashboard/images/collections.svg" %}" />
                    </a>
                  </li>
                </ul>
                <div class="tab-content" id="details">
                  <div class="card">
                    <div class="card-content">
                      <span class="card-title" contenteditable="true">
                        Details
                      </span>
                      <p contenteditable="true">
                        Lorem ipsum dolor sit amet mauris. Etiam sapien quis justo. Maecenas consequat, orci quis blandit ultrices posuere vitae, mollis nunc tempus euismod. Vestibulum ante eget odio. Nam pellentesque ut, turpis. Nam sed est id aliquet elit metus, quis nibh. Morbi augue imperdiet wisi.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="tab-content" id="variants">
                  <div class="card">
                    <div class="card-content">
                      <span class="card-title" contenteditable="true">
                        Variants
                      </span>
                      <p contenteditable="true">
                        Lorem ipsum dolor sit amet mauris. Etiam sapien quis justo. Maecenas consequat, orci quis blandit ultrices posuere vitae, mollis nunc tempus euismod. Vestibulum ante eget odio. Nam pellentesque ut, turpis. Nam sed est id aliquet elit metus, quis nibh. Morbi augue imperdiet wisi.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="tab-content" id="stock">
                  <div class="card">
                    <div class="card-content">
                      <span class="card-title" contenteditable="true">
                        Stock
                      </span>
                      <p contenteditable="true">
                        Lorem ipsum dolor sit amet mauris. Etiam sapien quis justo. Maecenas consequat, orci quis blandit ultrices posuere vitae, mollis nunc tempus euismod. Vestibulum ante eget odio. Nam pellentesque ut, turpis. Nam sed est id aliquet elit metus, quis nibh. Morbi augue imperdiet wisi.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="tab-content" id="images">
                  <div class="card">
                    <div class="card-content">
                      <span class="card-title" contenteditable="true">
                        Images
                      </span>
                      <p contenteditable="true">
                        Lorem ipsum dolor sit amet mauris. Etiam sapien quis justo. Maecenas consequat, orci quis blandit ultrices posuere vitae, mollis nunc tempus euismod. Vestibulum ante eget odio. Nam pellentesque ut, turpis. Nam sed est id aliquet elit metus, quis nibh. Morbi augue imperdiet wisi.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div id="tables" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Tables
                  <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                </h3>
                <div class="section">
                  <h4>
                    Regular Table
                  </h4>
                  <div class="card">
                    <div class="data-table-header">
                      <span class="data-table-title" contenteditable="true">
                        Orders
                      </span>
                    </div>
                    <div class="data-table-container">
                      <table class="bordered highlight responsive data-table">
                        <thead>
                          <tr>
                            <th contenteditable="true">
                              #
                            </th>
                            <th contenteditable="true">
                              Order status
                            </th>
                            <th contenteditable="true">
                              Payment status
                            </th>
                            <th contenteditable="true">
                              Customer
                            </th>
                            <th contenteditable="true">
                              Placed on
                            </th>
                            <th class="right-align" contenteditable="true">
                              Total
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                            <tr>
                              <td contenteditable="true">
                                #11
                              </td>
                              <td>
                                <span class="label label-success" contenteditable="true">
                                  Shipped
                                </span>
                              </td>
                              <td>
                                <span class="label label-success" contenteditable="true">
                                  Confirmed
                                </span>
                              </td>
                              <td contenteditable="true">
                                frederick.shaw@example.com
                              </td>
                              <td contenteditable="true">
                                {% now "F j, Y, H:i" %}
                              </td>
                              <td class="right-align" contenteditable="true">
                                299,06&nbsp;
                                <span class="currency">USD</span>
                              </td>
                            </tr>
                            <tr>
                              <td contenteditable="true">
                                #11
                              </td>
                              <td>
                                <span class="label label-default" contenteditable="true">
                                  PAYMENT PENDING
                                </span>
                              </td>
                              <td>
                                <span class="label label-default" contenteditable="true">
                                  Pre-authorized
                                </span>
                              </td>
                              <td contenteditable="true">
                                frederick.shaw@example.com
                              </td>
                              <td contenteditable="true">
                                {% now "F j, Y, H:i" %}
                              </td>
                              <td class="right-align" contenteditable="true">
                                299,06&nbsp;
                                <span class="currency">USD</span>
                              </td>
                            </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                <div class="section">
                  <h4>
                    Table with button
                  </h4>
                  <div class="card">
                    <div class="data-table-header-action">
                      <a href="" class="btn-data-table btn-flat" contenteditable="true">
                        Add
                      </a>
                    </div>
                    <div class="data-table-container">
                      <table class="bordered highlight responsive data-table">
                        <thead>
                          <tr>
                            <th contenteditable="true">
                              #
                            </th>
                            <th contenteditable="true">
                              Order status
                            </th>
                            <th contenteditable="true">
                              Payment status
                            </th>
                            <th contenteditable="true">
                              Customer
                            </th>
                            <th contenteditable="true">
                              Placed on
                            </th>
                            <th class="right-align" contenteditable="true">
                              Total
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                            <tr>
                              <td contenteditable="true">
                                #11
                              </td>
                              <td>
                                <span class="label label-success" contenteditable="true">
                                  Shipped
                                </span>
                              </td>
                              <td>
                                <span class="label label-success" contenteditable="true">
                                  Confirmed
                                </span>
                              </td>
                              <td contenteditable="true">
                                frederick.shaw@example.com
                              </td>
                              <td contenteditable="true">
                                {% now "F j, Y, H:i" %}
                              </td>
                              <td class="right-align" contenteditable="true">
                                299,06&nbsp;
                                <span class="currency">USD</span>
                              </td>
                            </tr>
                            <tr>
                              <td contenteditable="true">
                                #11
                              </td>
                              <td>
                                <span class="label label-default" contenteditable="true">
                                  PAYMENT PENDING
                                </span>
                              </td>
                              <td>
                                <span class="label label-default" contenteditable="true">
                                  Pre-authorized
                                </span>
                              </td>
                              <td contenteditable="true">
                                frederick.shaw@example.com
                              </td>
                              <td contenteditable="true">
                                {% now "F j, Y, H:i" %}
                              </td>
                              <td class="right-align" contenteditable="true">
                                299,06&nbsp;
                                <span class="currency">USD</span>
                              </td>
                            </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div> 
                <div class="section">
                  <h4>
                    Table with checkbox
                  </h4>
                  <div class="card">
                    <form>
                      <div class="data-table-header-action">
                        <a href="" class="btn-data-table btn-show-when-unchecked btn-flat" contenteditable="true">
                          Add
                        </a>
                        <a href="" class="btn-data-table btn-show-when-checked btn-flat" style="display:none" hidden contenteditable="true">
                          Delete
                        </a>
                      </div>
                      <div class="data-table-container">
                        <table class="bordered highlight responsive data-table">
                            <thead>
                              <tr>
                                <th class="bulk-checkbox">
                                  <input type="checkbox" id="one" class="filled-in select-all switch-actions">
                                  <label for="one"></label>
                                </th>
                                <th contenteditable="true">
                                  SKU
                                </th>
                                <th contenteditable="true">
                                  Box Size
                                </th>
                                <th class="wide" contenteditable="true">
                                  Variant
                                </th>
                                <th class="right-align" contenteditable="true">
                                  Price
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td class="bulk-checkbox ignore-link">
                                  <input id="two" name="items" type="checkbox" value="{{ variant.id }}" class="filled-in switch-actions">
                                  <label for="two"></label>
                                </td>
                                <td contenteditable="true">
                                  2-1337
                                </td>
                                <td contenteditable="true">
                                   1kg 
                                </td>
                                <td>
                                </td>
                                <td class="right-align" contenteditable="true">
                                  124,91&nbsp;<span class="currency">USD</span>
                                </td>
                              </tr>
                              <tr>
                                <td class="bulk-checkbox ignore-link">
                                  <input id="three" name="items" type="checkbox" value="{{ variant.id }}" class="filled-in switch-actions">
                                  <label for="three"></label>
                                </td>
                                <td contenteditable="true">
                                  2-1338
                                </td>
                                <td contenteditable="true">
                                   500g 
                                </td>
                                <td>
                                </td>
                                <td class="right-align" contenteditable="true">
                                  54,91&nbsp;<span class="currency">USD</span>
                                </td>
                              </tr>
                              <tr>
                                <td class="bulk-checkbox ignore-link">
                                  <input id="four" name="items" type="checkbox" value="{{ variant.id }}" class="filled-in switch-actions">
                                  <label for="four"></label>
                                </td>
                                <td contenteditable="true">
                                  2-1339
                                </td>
                                <td contenteditable="true">
                                   200g 
                                </td>
                                <td>
                                </td>
                                <td class="right-align" contenteditable="true">
                                  34,91&nbsp;<span class="currency">USD</span>
                                </td>
                              </tr>
                              <tr>
                                <td class="bulk-checkbox ignore-link">
                                  <input id="id_variants_{{ variant.id }}" name="items" type="checkbox" value="{{ variant.id }}" class="filled-in switch-actions">
                                  <label for="id_variants_{{ variant.id }}"></label>
                                </td>
                                <td contenteditable="true">
                                  2-1340
                                </td>
                                <td contenteditable="true">
                                   100g 
                                </td>
                                <td>
                                </td>
                                <td class="right-align" contenteditable="true">
                                  24,91&nbsp;<span class="currency">USD</span>
                                </td>
                              </tr>
                            </tbody>
                        </table>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="section">
                  <h4>
                    Empty Table
                  </h4>
                  <div class="card">
                    <div class="data-table-header">
                      <span class="data-table-title" contenteditable="true">
                        Orders
                      </span>
                    </div>
                    <div class="data-table-container">
                      <table class="bordered highlight responsive data-table">
                        <thead>
                          <tr>
                            <th contenteditable="true">
                              #
                            </th>
                            <th contenteditable="true">
                              Order status
                            </th>
                            <th contenteditable="true">
                              Payment status
                            </th>
                            <th contenteditable="true">
                              Customer
                            </th>
                            <th contenteditable="true">
                              Placed on
                            </th>
                            <th class="right-align" contenteditable="true">
                              Total
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                            <tr>
                              <td>
                                <span contenteditable="true">
                                  No orders found
                                </span>
                              </td>
                            </tr>
                        </tbody>
                      </table>
                    </div>
                  </div> 
              </div>
              <div id="lists" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Lists
                  <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                </h3>
                <div class="section">
                  <h4>
                    1 line list
                  </h4>
                  <ul class="collection list">
                    <li class="collection-item list-item">
                      <a class="list-item-name" href="#" contenteditable="true">
                        <p class="list-item-name--single">
                          Groceries
                        </p>
                      </a>
                    </li>
                    <li class="collection-item list-item">
                      <a class="list-item-name" href="#" contenteditable="true">
                        <p class="list-item-name--single">
                          Accessories
                        </p>
                      </a>
                    </li>
                    <li class="collection-item list-item">
                      <a class="list-item-name" href="#" contenteditable="true">
                        <p class="list-item-name--single">
                          Apparel
                        </p>
                      </a>
                    </li>
                    <li class="collection-item list-item">
                      <a class="list-item-name" href="#" contenteditable="true">
                        <p class="list-item-name--single">
                          Books
                        </p>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="section">
                  <h4>
                    2 line list
                  </h4>
                  <ul class="collection list">
                    <li class="collection-item list-item">
                      <a class="list-item-name" href="#" contenteditable="true">
                        Groceries
                        <p class="list-item-desc">
                          <span>
                            Autem porro rem rem. Laudantium iure ipsam voluptates repellendus nulla esse blanditiis. Facere rerum occaecati adipisci porro quasi quibusdam. asdas as das das das das das
                          </span>
                        </p>
                      </a>
                    </li>
                    <li class="collection-item list-item">
                      <a class="list-item-name" href="#" contenteditable="true">
                        Accessories
                        <p class="list-item-desc">
                          <span>
                            Consequuntur ducimus laborum qui ea mollitia. Illum cum itaque consequuntur temporibus officia dolore. Atque sed aspernatur eligendi.
                          </span>
                        </p>
                      </a>
                    </li>
                    <li class="collection-item list-item">
                      <a class="list-item-name" href="#" contenteditable="true">
                        Apparel
                        <p class="list-item-desc">
                          <span>
                            Consequuntur officia enim est. Cum esse accusantium blanditiis quae modi inventore. Quia iusto veniam sed perferendis. 
                          </span>
                        </p>
                      </a>
                    </li>
                    <li class="collection-item list-item">
                      <a class="list-item-name" href="#" contenteditable="true">
                        Books
                        <p class="list-item-desc">
                          <span>
                            Nemo at repellat praesentium consequuntur at. Velit repellat accusamus corporis consequatur. Possimus error optio a nam officia laudantium. Nulla est iusto laboriosam laboriosam laborum.
                          </span>
                        </p>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="section">
                  <h4>
                    List with avatar
                  </h4>
                  <ul class="collection list">
                    <li class="collection-item avatar list-item">
                      <a href="#" contenteditable="true">
                        <img src="{% static 'images/placeholder60x60.png' %}"
                             srcset="{% static 'images/placeholder60x60.png' %} 1x, {% static 'images/placeholder120x120.png' %} 2x" 
                             alt="" class="circle teal">
                        <span class="title list-item-name">
                          Miller-Hill
                        </span>
                        <p class="list-item-price">
                          31,40&nbsp<span class="currency">USD</span>
                        </p>
                      </a>
                    </li>
                    <li class="collection-item avatar list-item">
                      <a href="#" contenteditable="true">
                        <img src="{% static 'images/placeholder60x60.png' %}"
                             srcset="{% static 'images/placeholder60x60.png' %} 1x, {% static 'images/placeholder120x120.png' %} 2x" 
                             alt="" class="circle teal">
                        <span class="title list-item-name">
                          Schmidt and Sons
                        </span>
                        <p class="list-item-price">
                          11,40&nbsp<span class="currency">USD</span>
                        </p>
                      </a>
                    </li>
                    <li class="collection-item avatar list-item">
                      <a href="#" contenteditable="true">
                        <img src="{% static 'images/placeholder60x60.png' %}"
                             srcset="{% static 'images/placeholder60x60.png' %} 1x, {% static 'images/placeholder120x120.png' %} 2x" 
                             alt="" class="circle teal">
                        <span class="title list-item-name">
                          Ramirez PLC
                        </span>
                        <p class="list-item-price">
                          25,40&nbsp<span class="currency">USD</span>
                        </p>
                      </a>
                    </li>
                    <li class="collection-item avatar list-item">
                      <a href="#" contenteditable="true">
                        <img src="{% static 'images/placeholder60x60.png' %}"
                             srcset="{% static 'images/placeholder60x60.png' %} 1x, {% static 'images/placeholder120x120.png' %} 2x" 
                             alt="" class="circle teal">
                        <span class="title list-item-name">
                          Foster-Brown
                        </span>
                        <p class="list-item-price">
                          66,40&nbsp<span class="currency">USD</span>
                        </p>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="section">
                  <h4>
                    Empty List
                  </h4>
                  <div class="not-found">
                    <p class="grey-text" contenteditable="true">
                      No categories.
                    </p>
                  </div>
                </div>
              </div>
              <div id="cards" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Cards
                  <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                </h3>
                <div class="row">
                  <div class="col m6">
                    <div class="card">
                      <div class="card-content">
                        <span class="card-title" contenteditable="true">
                          Card Title
                        </span>
                        <p contenteditable="true">
                          Nemo at repellat praesentium consequuntur at. Velit repellat accusamus corporis consequatur. Possimus error optio a nam officia laudantium. Nulla est iusto laboriosam laboriosam laborum.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col m6">
                    <div class="card">
                      <div class="card-image">
                        <img src="{% static "images/block1.jpg" %}">
                        <span class="card-title" contenteditable="true">
                          Card Title
                        </span>
                      </div>
                      <div class="card-content">
                        <p contenteditable="true">
                          I am a very simple card. I am good at containing small bits of information.
                          I am convenient because I require little markup to use effectively.
                        </p>
                      </div>
                      <div class="card-action">
                        <a href="#" class="btn btn-flat" contenteditable="true">
                          This is a link
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="dropdowns" class="styleguide__content__block"> 
                <h3 class="styleguide__content__block--title">
                  Dropdowns
                </h3>
                <div class="card">
                  <div class="card-content">
                    <div class="section">
                      <h4>Button</h4>
                      <a class="dropdown-button btn" href="#" data-activates="dropdown1">
                        Drop Me!
                      </a>
                    </div>
                    <div class="section">
                      <h4>Link</h4>
                      <a class="dropdown-button" href="#" data-activates="dropdown1">
                        Drop Me!
                      </a>
                    </div>
                    <div class="section">
                      <h4>Icon</h4>
                      <a class="dropdown-button" href="#" data-activates="dropdown1">
                        <svg data-src="{% static "dashboard/images/more_vert.svg" %}" height="24" width="24" />
                      </a>
                    </div>
                    <ul id="dropdown1" class="dropdown-content">
                      <li>
                        <a href="#!">one</a>
                      </li>
                      <li>
                        <a href="#!">two</a>
                      </li>
                      <li class="divider"></li>
                      <li>
                        <a href="#!">three</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div id="modals" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Modals
                  <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                </h3>
                <div class="card">
                  <div class="card-content">
                    <div class="section">
                      <h4>Button</h4>
                      <a class="waves-effect waves-light btn" href="#modal1">
                        Modal
                      </a>
                    </div>
                    <div class="section">
                      <h4>Link</h4>
                      <a href="#modal1">
                        Modal
                      </a>
                    </div>
                    <div class="section">
                      <h4>Dropdown</h4>
                      <a class='dropdown-button' href='#' data-activates='dropdown2'>
                        <svg data-src="{% static "dashboard/images/more_vert.svg" %}" height="24" width="24" />
                      </a>
                      <ul id='dropdown2' class='dropdown-content'>
                        <li>
                          <a href="#modal1">Modal</a>
                        </li>
                      </ul>
                    </div>
                    <div id="modal1" class="modal">
                      <div class="modal-content">
                        <h4 contenteditable="true">
                          Modal Header
                        </h4>
                        <p contenteditable="true">
                          I am a very simple card. I am good at containing small bits of information.
                          I am convenient because I require little markup to use effectively.
                        </p>
                      </div>
                      <div class="modal-footer">
                        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat" contenteditable="true">
                          Agree
                        </a>
                        <a href="#!" class=" modal-action modal-close btn-flat" contenteditable="true">
                          Cancel
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="toasts" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Toasts
                </h3>
                <div class="card">
                  <div class="card-content">
                    <a class="btn" onclick="Materialize.toast('Example toast text', 4000)"> Toast</a>
                  </div>
                </div>
              </div>
              <div id="pagination" class="styleguide__content__block">
                <h3 class="styleguide__content__block--title">
                  Pagination
                  <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24px" height="24px" />
                </h3>
                <ul class="pagination">
                  <li class="disabled">
                    <a href="#!">
                      <svg data-src="{% static "dashboard/images/chevron_left.svg" %}" />
                    </a>
                  </li>
                  <li class="active">
                    <a href="" contenteditable="true">
                      1
                    </a>
                  </li>
                  <li class="waves-effect">
                    <a href="" contenteditable="true">
                      2
                    </a>
                  </li>
                  <li class="waves-effect">
                    <a href="" contenteditable="true">
                      3
                    </a>
                  </li>
                  <li class="waves-effect">
                    <a href="" contenteditable="true">
                      4
                    </a>
                  </li>
                  <li class="waves-effect">
                    <a href="" contenteditable="true">
                      5
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <svg data-src="{% static "dashboard/images/chevron_right.svg" %}" fill="#000" />
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
    </main>
    <div id="base-modal" class="modal"></div>
    <div id="base-modal-fixed" class="modal modal-fixed-footer"></div>

    <!-- Core Scripts - Include with every page -->
    <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
    {% render_bundle 'vendor' 'js' %}
    {% render_bundle 'dashboard' 'js' %}
    <script src="{% static "versatileimagefield/js/versatileimagefield.js" %}"></script>
    {% include "dashboard/includes/_messages.html" %}

    {% block custom_js %}{% endblock %}
  </body>
</html>